﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}
@this.Partial("Index-js")
@this.RefStyle("~/Content/wdtree/tree.css")
@this.RefScript("~/Content/wdtree/tree.js")
@this.RefStyle("~/Content/select2/select2.min.css")
@this.RefScript("~/Content/select2/select2.min.js")
@this.RefStyle("~/Content/wizard/wizard.css")
@this.RefScript("~/Content/wizard/wizard.js")

<div class="topPanel">
    <div class="toolbar">
        <div class="btn-group">
            <a class="btn btn-primary" onclick="$ace.reload()"><span class="glyphicon glyphicon-refresh"></span></a>
        </div>
        <div class="btn-group">
            <button class="btn btn-primary" data-bind="click:Edit,attr:{disabled:!DataTable.SelectedModel()}"><i class="fa fa-pencil-square-o"></i>修改</button>
            <button class="btn btn-primary" data-bind="click:Delete,attr:{disabled:!DataTable.SelectedModel()}"><i class="fa fa-trash-o"></i>删除</button>
            <button class="btn btn-primary" data-bind="click:Add"><i class="fa fa-plus"></i>添加</button>
        </div>
    </div>
    <div class="search">
        <table>
            <tr>
                <td>
                    <div class="input-group">
                        <input id="txt_keyword" type="text" class="form-control" placeholder="角色名称/角色编号" style="width: 200px;" data-bind="value:SearchModel().keyword">
                        <span class="input-group-btn">
                            <button id="btn_search" type="button" class="btn  btn-primary" data-bind="click:Search"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-hover" data-bind="with:DataTable">
        <thead>
            <tr>
                <th style="width:20px;"></th>
                <th>角色名称</th>
                <th>角色编号</th>
                @*<th>角色类型</th>*@
                <th>创建时间</th>
                <th>状态</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody data-bind="foreach:Models">
            <tr data-bind="click:$parent.SelectRow">
                <td data-bind="text:$parent.GetOrdinal($index())"></td>
                <td data-bind="text:Name"></td>
                <td data-bind="text:EnCode"></td>
                @*<td data-bind="text:Type"></td>*@
                <td data-bind="dateString:CreationTime"></td>
                <td data-bind="text:IsEnabled()?'启用':'禁用'"></td>
                <td data-bind="text:Description"></td>
            </tr>
        </tbody>
    </table>
</div>

<dialogbox data-bind="with:Dialog" no-footer="true">
    <div class="modal-body">

        <form id="form1">
            <div class="widget-body">
                <div id="wizard" class="wizard" data-target="#wizard-steps" style="border-left: none; border-top: none; border-right: none;">
                    <ul class="steps">
                        <li data-target="#step-1" class="active"><span class="step">1</span>角色信息<span class="chevron"></span></li>
                        <li data-target="#step-2"><span class="step">2</span>功能权限<span class="chevron"></span></li>
                    </ul>
                </div>
                <div class="step-content" id="wizard-steps" style="border-left: none; border-bottom: none; border-right: none;">
                    <div class="step-pane active" id="step-1" style="margin: 10px; margin-bottom: 0px;">
                        <div class="alert alert-danger" style="text-align: left; margin-bottom: 10px;">
                            <i class="fa fa-warning alert-dismissible" style="position: relative; top: 1px; font-size: 15px; padding-right: 5px;"></i>
                            请填写角色信息，用于创建或修改角色信息！
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">表单信息</h3>
                            </div>
                            <div class="panel-body" style="width: 98%;">
                                <table class="form">
                                    <tr>
                                        <th class="formTitle">角色名称</th>
                                        <td class="formValue">
                                            <input id="FullName" name="Name" type="text" class="form-control required" placeholder="请输入角色名称" data-bind="value:Model().Name" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle">角色编号</th>
                                        <td class="formValue">
                                            <input id="EnCode" name="EnCode" type="text" class="form-control required" placeholder="请输入角色编号" data-bind="value:Model().EnCode" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle">显示顺序</th>
                                        <td class="formValue">
                                            <input id="SortCode" name="SortCode" type="text" class="form-control" placeholder="请输入显示顺序" data-bind="value:Model().SortCode" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="formTitle">是否启用</td>
                                        <td class="formValue">
                                            <label><input type="radio" name="IsEnabled" value="true" data-bind="typedChecked:Model().IsEnabled,dataType:'bool'" />是</label>
                                            <label><input type="radio" name="IsEnabled" value="false" data-bind="typedChecked:Model().IsEnabled,dataType:'bool'" />否</label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle" valign="top" style="padding-top: 5px;">
                                            备注
                                        </th>
                                        <td class="formValue">
                                            <textarea id="Description" name="Description" class="form-control" style="height: 60px;" data-bind="value:Model().Description"></textarea>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="step-pane" id="step-2">
                        <div id="permissionTree"></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer" id="wizard-actions">
        <a id="btn_last" disabled class="btn btn-default btn-prev">上一步</a>
        <a id="btn_next" class="btn btn-default btn-next">下一步</a>
        <a id="btn_finish" class="btn btn-default" style="display: none;" data-bind="click:Save">完成</a>
        @*<button id="btn_last" type="button" class="btn btn-default btn-prev">上一步</button>
            <button id="btn_next" type="button" class="btn btn-default btn-next">下一步</button>
            <button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click:function(){ IsShow(false);}">完成</button>*@
    </div>

</dialogbox>
